<style lang="scss" scoped>
	.rfeeds {
		background-color: #FFFFFF;
		padding-bottom: 20upx;

		.one-feeds-box {
			width: 704upx;
			margin: 4upx 22upx 0 22upx;
			// 定义栅格布局
			display: grid;
			// 定义栅格每一列的宽度
			grid-template-columns: 232upx 232upx 232upx;
			// 定义栅格每一行的高度
			grid-template-rows: 232upx 232upx 232upx;
			// grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）
			grid-row-gap: 4upx;
			grid-column-gap: 4upx;
			background-color: #DADADA;

			.one-feed {
				position: relative;

				.feed-content {
					width: 232upx;
					height: 232upx;
					border: 1px solid #EEEEEE;
					border-radius: 4upx;
				}

				.icon {
					position: absolute;
					right: 10upx;
					top: 10upx;

					.play-icon {
						width: 40upx;
						height: 40upx;
					}
				}

				&.feed-big-left {
					grid-column-start: 1;
					grid-column-end: 3;
					grid-row-start: 1;
					grid-row-end: 3;
					background-color: #DADADA;

					.feed-content {
						width: 466upx;
						height: 466upx;
						border: 1px solid #EEEEEE;
					}
				}

				&.feed-big-right {
					grid-column-start: 2;
					grid-column-end: 4;
					grid-row-start: 1;
					grid-row-end: 3;
					background-color: #DADADA;

					.feed-content {
						width: 466upx;
						height: 466upx;
						border: 1px solid #EEEEEE;
					}
				}
			}
		}
	}
</style>
<template>
	<view class="rfeeds">
		<view class="one-feeds-box" v-for=" (feedsList, i) in showFeedsList " :key="i">
			<view v-for=" (item, index) in feedsList " :key="index" class="one-feed" :class="index % 6 == 0 ? ( i%2==0 ? 'feed-big-left' :'feed-big-right' ) : '' ">
				<navigator open-type="navigate" :url=" item.video ? '/feed/video?id='+item.id : '/feed/feed?id='+item.id ">
					<image v-if=" !item.video " :src="!!item.images ?  item.images[0].url : '' " class="feed-content" mode="aspectFill"
					 :lazy-load="true" />
					<image v-else :src="!!item.video.cover ?  item.video.cover.url : '' " class="feed-content" mode="aspectFill"
					 :lazy-load="true" />
					<view v-if=" !!item.video " class="icon">
						<image src="../static/play.png" class="play-icon" />
					</view>
				</navigator>
			</view>
		</view>
		<!-- 分享按钮及其相关逻辑 -->
		<goto-share />
	</view>
</template>

<script>
	import gotoShare from "../components/basic/gotoShare.vue";
	export default {
		components: {
			gotoShare,
		},
		data() {
			return {
				// 列表数据
				feedsList: [],
				// 用来展示的栅格系统的列表数据
				showFeedsList: [],
				// 记录请求 feed 状态
				canRequestFeeds: "yes",
			};
		},
		// 发布新的动态，跳转到当前页面，更新最新信息
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			uni.startPullDownRefresh();
			//  事件 bus 添加动态事件触发
			uni.$on("addOneFeed", () => {
				console.log("发布了一条新动态，触发动态列表瀑布流数据更新")
				this.feedsList = [];
				this.getFeeds();
			});

			// 事件 bus 删除动态事件触发
			uni.$on("removeOneFeed", fid => {
				this.feedsList.map((one, index) => {
					if (one.id == fid) {
						this.feedsList.splice(index, 1);
						let showArrList = [];
						for (let i = 0; i < this.feedsList.length; i++) {
							if (i % 6 == 0) {
								showArrList = [
									...showArrList,
									this.feedsList.slice(i, i + 6),
								];
							}
						}
						this.showFeedsList = showArrList;
					}
				});
			});
		},
		// 顶部下拉刷新新数据
		onPullDownRefresh() {
			this.feedsList = [];
			this.getFeeds();
			let timer = setTimeout(function() {
				clearTimeout(timer);
				uni.stopPullDownRefresh();
			}, 500);
		},
		// 滚动置底刷新请求数据
		onReachBottom() {
			this.getFeeds();
		},
		methods: {
			// 获取请求数据
			async getFeeds() {
				if (this.canRequestFeeds == "yes") {
					uni.showToast({
						title: "请求中...",
						icon: "loading",
						duration: 10000,
					});
					this.canRequestFeeds = "no";
					this.$u.api
						.getNewStorys({
							category: 0,
							limit: 18,
							offset: this.feedsList.length,
						})
						.then((feeds) => {
							uni.hideToast();
							let ofeeds  = [];
							// 去掉 纯文字动态
							feeds.map( one =>{
								if(one.images.length>0 || !!one.video){
									ofeeds.push(one)
								}
							})
							console.log(ofeeds)
							if (feeds.length > 5) {
								// 记录总列表数据
								this.feedsList = [...this.feedsList, ...ofeeds];
								// 在这里要处理页面的内容布局模式为栅格模式，6个元素一组
								let showArrList = [];
								for (let i = 0; i < this.feedsList.length; i++) {
									if (i % 6 == 0 && !!this.feedsList[i + 5]) {
										showArrList = [
											...showArrList,
											this.feedsList.slice(i, i + 6),
										];
									}
								}
								console.log(showArrList);
								this.showFeedsList = showArrList;
								let timer = setTimeout(() => {
									clearTimeout(timer);
									this.canRequestFeeds = "yes";
								}, 500);
							} else {
								this.canRequestFeeds = "end";
								uni.showToast({
									title: "到底啦！",
									icon: "success",
									duration: 1000,
								});
							}
						});
				}
				if (this.canRequestFeeds == "end") {
					uni.hideToast();
					uni.showToast({
						title: "到底啦！",
						icon: "success",
						duration: 1000,
					});
				}
			},
		},
	};
</script>
